import Vue from "vue";
import Vuex from "vuex";
import jsonp from "jsonp";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 标题
    title: "",
    // 列表
    list: [],
    // 详情
    item: null
  },
  mutations: {
    // payload = {title,list}  约定数据格式
    setListPageData(state, payload) {
      state.title = payload.title;
      state.list = payload.list;
    },
    // payload = {title,item}  约定数据格式
    setItemPageData(state, payload) {
      state.title = payload.title;
      state.item = payload.item;
    }
  },
  actions: {
    // 获取数据  列表
    getListData(context, type) {
      // 注意：豆瓣接口不支持跨域  支持jsonp
      // 通过: jsonp的第三方插件  专门发jsonp请求
      jsonp(
        "http://api.douban.com/v2/movie/" +
          type +
          "?apikey=0df993c66c0c636e29ecbb5344252a4a",
        (err, data) => {
          if (err) return alert("接口请求失败");
          console.log(data);
          // 提交数据  mutations
          context.commit("setListPageData", {
            title: data.title,
            list: data.subjects
          });
        }
      );
    },
    // 获取数据 详情
    getItemData(context, id) {
      jsonp(
        "http://api.douban.com/v2/movie/subject/" +
          id +
          "?apikey=0df993c66c0c636e29ecbb5344252a4a",
        (err, data) => {
          if (err) return alert("接口请求失败");
          console.log(data);
          // 提交数据  mutations
          context.commit("setItemPageData", {
            title: data.title,
            item: data
          });
        }
      );
    }
  }
});

export default store;
